<template>
    <div v-if="user != null">
        <div class="bar">
            <div class="logo">
                <img src="https://goods.dingdian.xin/FvO0spJd08pXa7apSnuUrEAxLarC" alt="">
                <span v-if="!isCollapse">八点半</span>
            </div>
            <el-menu :default-active="$route.path" background-color="#424755" text-color="#fff" class="el-menu-vertical-demo" router :collapse="isCollapse">
                <el-submenu index="1" v-if="user.roleId != 2">
                    <template slot="title">
                        <i class="el-icon-menu"></i>
                        <span @click="toggleSlide" slot="title">订单管理</span>
                    </template>
                    <el-menu-item-group>
                        <el-menu-item @click="delPage" index="/orderList">订单列表</el-menu-item>
                        <el-menu-item @click="delPage" index="/orderDataStatistics">订单统计</el-menu-item>
                        <el-menu-item @click="delPage" index="/orderExport">订单导出</el-menu-item>
                        <el-menu-item @click="delPage" index="/operatingReport">运营报表</el-menu-item>
                    </el-menu-item-group>
                </el-submenu>
                <el-submenu index="2" v-if="user.roleId == 2">
                    <template slot="title">
                        <i class="el-icon-news"></i>
                        <span @click="toggleSlide" slot="title">平台用户</span>
                    </template>
                    <el-menu-item-group>
                        <el-menu-item @click="delPage" index="/userList">用户列表</el-menu-item>
                    </el-menu-item-group>
                </el-submenu>
                <el-submenu index="3" v-if="user.roleId != 2">
                    <template slot="title">
                        <i class="el-icon-document"></i>
                        <span @click="toggleSlide" slot="title">活动管理</span>
                    </template>
                    <el-menu-item-group>
                        <el-menu-item @click="delPage" index="/activityList">活动列表</el-menu-item>
                    </el-menu-item-group>
                </el-submenu>
                <el-submenu index="4" v-if="user.roleId != 2">
                    <template slot="title">
                        <i class="el-icon-goods"></i>
                        <span @click="toggleSlide" slot="title">商品管理</span>
                    </template>
                    <el-menu-item-group>
                        <el-menu-item @click="delPage" index="/goodsList">商品列表</el-menu-item>
                        <!-- <el-menu-item @click="delPage" index="/importGoods">导入商品</el-menu-item> -->
                    </el-menu-item-group>
                </el-submenu>
                <el-submenu index="10" v-if="user.roleId != 2">
                    <template slot="title">
                        <i class="el-icon-star-on"></i>
                        <span @click="toggleSlide" slot="title">视频管理</span>
                    </template>
                    <el-menu-item-group>
                        <el-menu-item @click="delPage" index="/videoList">视频列表</el-menu-item>
                    </el-menu-item-group>
                </el-submenu>
                <el-submenu index="9" v-if="user.roleId != 2">
                    <template slot="title">
                        <i class="el-icon-edit-outline"></i>
                        <span @click="toggleSlide" slot="title">代购礼包</span>
                    </template>
                    <el-menu-item-group>
                        <el-menu-item @click="delPage" index="/giftPackList">礼包列表</el-menu-item>
                    </el-menu-item-group>
                </el-submenu>
                <el-submenu index="5" v-if="user.roleId != 2">
                    <template slot="title">
                        <i class="el-icon-tickets"></i>
                        <span @click="toggleSlide" slot="title">品牌管理</span>
                    </template>
                    <el-menu-item-group>
                        <el-menu-item @click="delPage" index="/brandList">品牌列表</el-menu-item>
                        <el-menu-item @click="delPage" index="/bannerList">Banner列表</el-menu-item>
                    </el-menu-item-group>
                </el-submenu>
                <el-submenu index="6" v-if="user.roleId == 2">
                    <template slot="title">
                        <i class="el-icon-setting"></i>
                        <span @click="toggleSlide" slot="title">平台管理</span>
                    </template>
                    <el-menu-item-group>
                        <!-- <el-menu-item  @click="delPage" index="/depotManage">仓库管理</el-menu-item> -->
                        <el-menu-item @click="delPage" index="/depotList">仓库列表</el-menu-item>
                    </el-menu-item-group>
                </el-submenu>
                <!-- <el-submenu index="7" v-if="user.roleId != 2">
                    <template slot="title">
                        <i class="el-icon-setting"></i>
                        <span @click="toggleSlide" slot="title">渠道管理</span>
                    </template>
                    <el-menu-item-group>
                        <el-menu-item @click="delPage" index="/channelList">渠道列表</el-menu-item>
                    </el-menu-item-group>
                </el-submenu> -->
                 <el-submenu index="11" v-if="user.roleId != 2">
                    <template slot="title">
                        <i class="el-icon-service"></i>
                        <span @click="toggleSlide" slot="title">用户管理</span>
                    </template>
                    <el-menu-item-group>
                        <el-menu-item @click="delPage" index="/customerList">用户列表</el-menu-item>
                        <el-menu-item @click="delPage" index="/activityCustomer">活动用户</el-menu-item>
                    </el-menu-item-group>
                </el-submenu>
                <el-submenu index="12" v-if="user.roleId != 2">
                    <template slot="title">
                        <i class="el-icon-circle-check-outline"></i>
                        <span @click="toggleSlide" slot="title">佣金提现</span>
                    </template>
                    <el-menu-item-group>
                        <el-menu-item @click="delPage" index="/commissionList">佣金列表</el-menu-item>
                    </el-menu-item-group>
                </el-submenu>
                <el-submenu index="8" v-if="user.roleId != 2">
                    <template slot="title">
                        <i class="el-icon-setting"></i>
                        <span @click="toggleSlide" slot="title">优惠券管理</span>
                    </template>
                    <el-menu-item-group>
                        <!-- <el-menu-item  @click="delPage" index="/depotManage">仓库管理</el-menu-item> -->
                        <el-menu-item @click="delPage" index="/couponList">优惠券列表</el-menu-item>
                    </el-menu-item-group>
                </el-submenu>
            </el-menu>
        </div>

        <div class="topBar">
            <div class="adminName">八点半爆品 <span  style="font-size:16px;color:red;">({{this.environment}})</span></div>
            <div class="user">
                <div>
                    <p>用户名：{{user.nickName}}</p>
                    <p>仓库名：{{storeName}}</p>
                </div>
                <img src="../../assets/avator.png" alt="">
                <section class="show">
                    <a href="javascript:;" @click="isShow = true;form.old = '';form.new1 = '';form.new2 = ''">修改密码</a>
                    <a href="javascript:;" @click="signout">登出</a>
                </section>
                <i class="el-icon-caret-bottom"></i>
            </div>
        </div>
        <div class="popup-detail" v-if="form && isShow">
            <h1>修改密码</h1>
            <el-form ref="form" :rules="rules" v-if="form" :model="form" label-width="100px">
                <el-form-item label="旧密码" prop="old">
                    <el-input style="width:300px" prop="old" v-model="form.old" type="password" placeholder="请输入旧密码" clearable></el-input>
                </el-form-item>
                <el-form-item label="新密码" prop="new1">
                    <el-input style="width:300px" prop="new1" v-model="form.new1" type="password" placeholder="请输入新密码" clearable></el-input>
                </el-form-item>
                <el-form-item label="确认新密码" prop="new2">
                    <el-input style="width:300px" prop="new2" v-model="form.new2" type="password" placeholder="请输入新密码" clearable></el-input>
                </el-form-item>
                <section class="submit">
                    <el-button type="primary" @click="changepass">提交</el-button>
                </section>
            </el-form>
            <i class="el-icon-circle-close-outline close" title="关闭" @click="isShow = false"></i>
        </div>
        <div class="mask" v-if="isShow"></div>

    </div>
</template>

<script>
import { updateUser, getStoreByStroreNo } from "../../data/postData";
export default {
    name: "leftBar",

    mounted() {
        if (
            sessionStorage.getItem("ddaigoUser") == null ||
            sessionStorage.getItem("ddaigoUser") == "null"
        ) {
            this.$router.push({ path: "/login" });
            localStorage.removeItem("ddaigoUser");
        }

        var params = {
            data: {
                storeNo: this.user.storeNo
            }
        };
        this.$fetch.post(getStoreByStroreNo, params).then(res => {
            this.storeName = res.data.storeName;
        }).catch(err => {});
    },
    data() {
        return {
            path: this.$route.path,
            user: JSON.parse(localStorage.getItem("ddaigoUser")),
            environment:localStorage.getItem("environment"),
            form: {
                old: "",
                new1: "",
                new2: ""
            },
            rules: {
                old: [
                    { required: true, message: "请输入旧密码", trigger: "blur" }
                ],
                new1: [
                    { required: true, message: "请输入新密码", trigger: "blur" }
                ],
                new2: [
                    { required: true, message: "请输入新密码", trigger: "blur" }
                ]
            },
            storeName: "",
            isShow: false,
            isCollapse: false
        };
    },
    methods: {
        delPage() {
            this.$store.state.coupon.page = 1
            this.$store.state.activity.page = 1
            this.$store.state.activity.activityGoodsListPage = 1
            this.$store.state.gift.giftListPage = 1
            this.$store.state.order.orderListPage = 1
            this.$store.state.video.videoListPage = 1
    
            localStorage.removeItem("Page");
        },
        toggleSlide(e) {
            var parent = e.currentTarget.parentNode;
            var section = parent.querySelector("span");
            var i = parent.querySelector("i");
            if (section.className == "") {
                section.className = "active";
                i.className += " active";
            } else {
                section.className = "";
                // i.className = "el-icon-caret-bottom";
            }
            localStorage.removeItem("Page");
            localStorage.removeItem("logisticStatus");
            localStorage.removeItem("orderStatus");
            localStorage.removeItem("activityId");
        },
        signout() {
            this.$message({
                message: "登出成功",
                type: "success",
                duration: 1000
            });
            //localStorage.clear()
            // localStorage.setItem('ddaigoUser',null)
            localStorage.removeItem("ddaigoUser");
            localStorage.removeItem("environment");
            // sessionStorage.setItem('ddaigoUser',null)
            sessionStorage.removeItem("ddaigoUser", null);
            setTimeout(() => {
                this.$router.push({ path: "/login" });
            }, 1500);
            localStorage.clear();
        },
        changepass() {
            if (this.$md5(this.form.old) != this.user.password) {
                this.$message({
                    message: "旧密码输入错误",
                    type: "error",
                    duration: 1500
                });
            } else if (
                this.form.new1.trim() == "" ||
                this.form.new2.trim() == ""
            ) {
                this.$message({
                    message: "新密码不能为空",
                    type: "error",
                    duration: 1500
                });
            } else if (this.form.new1.length < 6) {
                this.$message({
                    message: "请输入6位数及以上",
                    type: "error",
                    duration: 1500
                });
            } else if (this.$md5(this.form.new1) != this.$md5(this.form.new2)) {
                this.$message({
                    message: "两次输入的新密码不一致",
                    type: "error",
                    duration: 1500
                });
            } else {
                let params = {
                    data: {
                        id: this.user.id,
                        name: this.user.name,
                        password: this.$md5(this.form.new1),
                        roleId: this.user.roleId,
                        status: this.user.status,
                        storeNo: this.user.storeNo
                    }
                };
                this.$fetch
                    .post(updateUser, params)
                    .then(res => {
                        this.$message({
                            message: "修改成功",
                            type: "success",
                            duration: 1000
                        });
                        this.user.password = this.$md5(this.form.new1);
                        // localStorage.setItem('ddaigoUser',JSON.stringify(this.user))
                        localStorage.clear();
                        sessionStorage.clear();
                        this.isShow = false;
                        setTimeout(() => {
                            this.$router.push({ path: "/login" });
                        }, 1500);
                    })
                    .catch(err => {
                        this.$message({
                            message: err.message,
                            type: "error",
                            duration: 1500
                        });
                    });
            }
        }
    }
};
</script>

<style scoped lang="less">
.el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    max-height: calc(100% - 100px);
    overflow: auto;
}
.el-menu {
    border-right: none;
}
.bar {
    background: #424755;
    position: fixed;
    left: 0;
    top: 0;
    max-width: 200px;
    height: 100%;
    z-index: 99;
}
.logo {
    text-align: center;
    margin-top: 20px;
    img {
        width: 60px;
        display: inline-block;
    }
    span {
        display: inline-block;
        font-size: 26px;
        color: #fff;
        position: relative;
        top: -18px;
    }
}
// ul{
//     padding:15px 15px 15px 20px;
//     height: 100%;
//     width: 216px;
//     li{
//         margin: 10px 20px;
//         h3{
//             margin-bottom: 15px;
//             color: #fff;
//             position: relative;
//             cursor: pointer;
//             i{
//                 position: absolute;
//                 right: 12px;
//                 top: 3px;
//                 transition: all 0.5s;
//                 transform: rotate(-90deg)

//             }
//             i.active{
//                 transform: rotate(0)
//             }
//         }
//         section{
//             max-height: 0;
//             transition: all 0.5s;
//             overflow: hidden;
//         }
//         section.active{
//             max-height: 200px;
//         }
//         a{
//             color: #fff;
//             display: block;
//             margin-left: 20px;
//             text-align: center;
//             line-height: 30px;
//             width: 110px;
//             height: 30px;
//             border-radius: 5px;
//             &+a{
//                 margin-top: 10px;
//             }

//            &:hover{
//                 color: #fff;
//                 background: #409EFF;;
//             }
//         }
//     }
// }
 span{
    max-height: 0;
    transition: all 0.5s;
    overflow: hidden;
}
span.active{
    max-height: 200px;
}
.topBar {
    position: fixed;
    top: 0;
    right: 0;
    height: 66px;
    background: #424755;
    width: 100%;
    z-index: 9;
    .mt {
        position: relative;
        top: -10px;
    }
    img {
        width: 50px;
        display: inline-block;
        margin-right: 20px;
        cursor: pointer;
    }
    .user {
        position: absolute;
        right: 20px;
        top: 8px;
        color: #fff;
        > div {
            display: inline-block;
            position: relative;
            top: -5px;
            left: -10px;
        }
        p {
            text-align: right;
        }
        &:hover .show {
            height: 84px;
        }
    }
    i {
        position: absolute;
        top: 50%;
        right: -10px;
        transform: translateY(-50%);
        font-size: 20px;
    }
    .show {
        position: absolute !important;
        right: -10px;
        top: 60px;
        background: #424755;
        width: 100px;
        text-align: center;
        border-radius: 5px;
        box-shadow: 0 10px 20px #ccc;
        overflow: hidden;
        transition: all 0.3s;
        height: 0;
        a {
            display: block;
            color: #fff;
            padding: 10px 0;
            &:hover {
                background: #409eff;
                color: #fff;
            }
            & + a {
                border-top: 1px solid #333;
            }
        }
    }
}
.adminName {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    font-size: 26px;
    letter-spacing: 2px;
}
a {
    color: #fff;
}
.router-link-active {
    color: #409eff;
    // background: #409EFF;;
}
.popup-detail {
    h1 {
        text-align: center;
        font-size: 24px;
        color: #666;
        margin-bottom: 30px;
    }
    .submit {
        display: block;
        margin-left: 100px;
    }
}
</style>